<template>
  <div>
    <div class="">{{ reply ? '' : '还没有人回复过您的帖子!' }}</div>
    <div style="float: left; text-align: left">
      <i-switch v-model="switch1" size="large">
        <span slot="open">ON</span>
        <span slot="close">OFF</span>
      </i-switch>
      是否显示自己对自己的回复
    </div>
    <div class="replyBox" v-for="item in reply" :key="item.replyId">
      <router-link
        v-show="item.authorId != $CommonVar.UserInformation.userId || switch1"
        :to="'/Posting/' + item.postingId"
      >
        <Card>
          <p slot="title" style="width: 500px">帖子名:{{ item.postingName }}</p>
          <p>回复人:{{ item.nickName }}</p>
          <p>回复时间:{{ item.replyDate }}</p>
          <p>楼层:{{ item.floor }}</p>
        </Card>
      </router-link>

      <Button
        type="error"
        v-show="item.authorId != $CommonVar.UserInformation.userId || switch1"
        @click="deleteReply(item.replyId, item.postingId)"
        style="
          position: relative;
          z-index: 2;
          margin-top: -100px;
          margin-left: 460px;
        "
        >删除回复</Button
      >
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyReply',
  data () {
    return {
      reply: '',
      switch1: false
    }
  },
  methods: {
    deleteReply: function (replyId, postingId) {
      console.log(replyId)
      console.log(postingId)
      var that = this
      this.$axios({
        method: 'post',
        url: '/deleteFloorPosting',
        data: {
          postingId: postingId,
          replyId: replyId
        }
      }).then(function (res) {
        console.log(res.data.result)
        if (res.data.code === 1) {
          that.$Message.info('删除成功!')
          that.selectReplyList()
        } else {
          that.$Message.error('删除失败!')
        }
      })
    },
    selectReplyList () {
      var that = this
      this.$axios({
        method: 'post',
        url: '/selectOtherReply'
      }).then(function (res) {
        console.log(res.data.result)
        if (res.data.result.length > 0) { that.reply = res.data.result } else { that.reply = '' }
      })
    }
  },
  mounted () {
    console.log('尝试加载用户信息')
    var _this = this
    this.$axios({
      method: 'post',
      url: '/login/success'
    }).then(function (response) {
      console.log(response.data.result)
      if (response.data.code === 1) {
        _this.$CommonVar.UserInformation = response.data.result
        _this.selectReplyList()
      } else {
        console.log('登录信息过期了')
        // _this.$cookies.delete('JSESSIONID')
      }
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.replyBox {
  margin-left: 30%;
  width: 30%;
  text-align: left;
  margin-bottom: 1em;
  /* border: 1px dashed black; */
  /* background: black; */
}
</style>
